<!--
 * @Descripttion:
 * @version:
 * @Author: hhy
 * @Date: 2021-04-21 17:52:18
 * @LastEditors: hhy
 * @LastEditTime: 2021-05-17 16:12:22
 * @FilePath: \votemp-user-pc\src\views\components\actList\act-clear-data.vue
-->
<template>
  <div class="add-role">
    <el-form
      ref="administratorFormRef"
      :model="administratorForm"
      :rules="rules"
      class="act-clear-from"
      labelWidth="120px"
    >
      <el-form-item label="管理员名称：" prop="userName">
        <el-col :span="6">
          <el-input v-model.trim="administratorForm.userName" size="large" />
        </el-col>
      </el-form-item>
      <el-form-item label="管理员账号：" prop="userId">
        <el-col :span="6">
          <el-input
            v-model.trim="administratorForm.userId"
            placeholder="手机号"
            size="large"
          />
        </el-col>
      </el-form-item>
      <el-form-item label="管理员密码：">
        <el-col :span="6">
          <el-input v-model="administratorForm.password" size="large" />
        </el-col>
      </el-form-item>
      <el-form-item label="角色：" prop="roleId">
        <h-select
          v-model="administratorForm.roleId"
          :option="option"
          width="335"
          show-border
          placeholder="请选择角色"
        />
      </el-form-item>
      <el-form-item label="状态：">
        <el-switch
          v-model="administratorForm.status"
          size="large"
          inline-prompt
          active-text="启用"
          inactive-text="禁用"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="$router.go(-1)">取消</el-button>
        <el-button type="primary" @click="onConfirm(administratorFormRef)">
          确定
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { defineComponent, toRefs, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { baseMsg } from "@/utils/utils";
import {
  GetRoleListAll,
  GetAdministratorDetails,
  AddAdministrator,
  UpdateAdministrator,
} from "@/api/system";
export default defineComponent({
  emits: ["confirm", "close"],
  setup() {
    const route = useRoute();
    const router = useRouter();
    const administratorFormRef = ref(null);
    const state = reactive({
      rules: {
        userName: [
          {
            required: true,
            message: "请输入管理员名称",
            trigger: "blur",
          },
        ],
        userId: [
          {
            pattern: /^1[0-9]{10}$/,
            required: true,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        roleId: [
          {
            required: true,
            message: "请选择管理员角色",
            trigger: "blur",
          },
        ],
      },
      option: [],
      administratorForm: {
        userName: "",
        userId: "",
        password: "",
        roleId: "",
        status: 0,
      },
    });
    const init = async () => {
      if (route.query.type == "edit") {
        GetAdministratorDetails({
          id: route.query.id,
        }).then((res) => {
          if (res.code == 4201 || res.code == 4202) {
            state.administratorForm = {
              ...res.data,
            };
          }
        });
      }
      const role = await GetRoleListAll();
      if (role.code == 4201 || role.code == 4202) {
        role.data.map((item) => {
          state.option.push({
            label: item.roleName,
            value: item.roleId,
          });
        });
      }
    };
    init();

    const onConfirm = async (formEl) => {
      if (!formEl) return;
      await formEl.validate(async (valid, fields) => {
        if (valid) {
          if (state.administratorForm.password == "") {
            state.administratorForm.password =
              state.administratorForm.userId.substring(
                state.administratorForm.userId.length - 6
              );
          }
          if (route.query.type == "edit") {
            const res = await UpdateAdministrator(state.administratorForm);
            if (res.code == 4201 || res.code == 4202) {
              baseMsg("编辑成功");
              router.go(-1);
            } else {
              baseMsg("编辑失败", false);
            }
          } else {
            const res = await AddAdministrator(state.administratorForm);
            if (res.code == 4201 || res.code == 4202) {
              baseMsg("添加成功");
              router.go(-1);
            } else {
              baseMsg("添加失败", false);
            }
          }
        } else {
          return;
        }
      });
    };

    return {
      ...toRefs(state),
      onConfirm,
      administratorFormRef,
    };
  },
});
</script>
<style lang="scss">
.add-role {
  padding: 20px;
}
</style>
